<template>
    <div class="data_box">
        <div class="data_box_one">
            <Echars1 :data="routeDat.data.registerCharts" v-if="routeDat.data" :key="key"></Echars1>
            <Echars2 :data="routeDat.data.equipCharts" v-if="routeDat.data" :key="key"></Echars2>
            <Echars3 :data="routeDat.data.drugsCharts" v-if="routeDat.data" :key="key"></Echars3>
            <Echars4 :data="routeDat.data.vaccinesCharts" v-if="routeDat.data" :key="key"></Echars4>
        </div>
        <div class="data_box_two">
            <Echars5 :data="routeDat.data.curTop3" v-if="routeDat.data" :key="key"></Echars5>
            <Tabal  :data="routeDat.data.doctorList" v-if="routeDat.data" :key="key"></Tabal>
           
        </div>
        <div class="data_box_three">
            <Echars6 :data="routeDat.data.typeCharts" v-if="routeDat.data" :key="key"></Echars6>
        </div>
        
    </div>
</template>

<script setup lang="ts">
import { infomationcenterDiseaseReq } from '@/API/bigData.api';
import { onMounted, reactive, watchEffect,ref, onUnmounted } from 'vue';
import store from '@/store';
import Echars1 from './components/Data/Echars1.vue'
import Echars2 from './components/Data/Echars2.vue'
import Echars3 from './components/Data/Echars3.vue'
import Echars4 from './components/Data/Echars4.vue'
import Echars5 from './components/Data/Echars5.vue'
import Echars6 from './components/Data/Echars6.vue'

import { ECharts, EChartsOption, init } from 'echarts';
import Tabal from './components/Data/Tabal.vue';


const routeDat=reactive({
    data:null
})
const key=ref(0)
// 发送请求
const getData = async () => {
    const res = await infomationcenterDiseaseReq()
    // store.commit('M_cName',res.data)
    routeDat.data=res.data
}
watchEffect(() => {
    getData()
})
const timer=ref(null)
onUnmounted(()=>{
    clearInterval(timer.value)
})
onMounted( () => {
     getData()
     timer.value=setInterval(()=>{
        getData()
        // store.commit('M_cName',routeDat.data)
        key.value++
    },10000)
});
</script>

<style scoped lang="scss">
.data_box {
    display: flex;
    flex-direction: column;
    align-content: space-around;

    .data_box_one {
        height: 250px;
        // border: 1px solid #ccc;
        display: flex;
        justify-content: space-between;
        margin-top: 20px;
    }

    .data_box_two {
        height: 250px;
        // border: 1px solid #ccc;
        display: flex;
        justify-content: space-between;
        margin-top: 30px;
    }
    .data_box_three{
        height: 250px;
        // border: 1px solid #ccc;
        margin-top: 30px;
    }
}
</style>
